<template>
  <div id="contentRight">
    <section id="sec1">
      <div class="d1">
        <button :class="tabbarIndex === 0 ? 'active' : ''" @click="tabbarIndex=0">我承接的</button>
        <button :class="tabbarIndex === 1 ? 'active' : ''" @click="tabbarIndex=1">我转让的</button>
      </div>
      <div class="mcStyles">
        <div v-if="tabbarIndex === 0" class="types">
            <p>
              <span class="typeName">矿机类型:</span>
              <span class="type" :class="mcTypeParam.isBhpPos === 'ALL' ? 'active' : ''" @click="mcTypeParam.isBhpPos = 'ALL'">全部</span>
              <span class="type" :class="mcTypeParam.isBhpPos === 'PT' ? 'active' : ''" @click="mcTypeParam.isBhpPos = 'PT'">单挖</span>
              <span class="type" :class="mcTypeParam.isBhpPos === 'SW' ? 'active' : ''" @click="mcTypeParam.isBhpPos = 'SW'">双挖</span>
            </p>
            <p>
              <span class="typeName">合约状态:</span>
              <span class="type" :class="mcTypeParam.state === 'ALL' ? 'active' : ''" @click="mcTypeParam.state = 'ALL'">全部</span>
              <span class="type" :class="mcTypeParam.state === 'KW' ? 'active' : ''" @click="mcTypeParam.state = 'KW'">在挖</span>
              <span class="type" :class="mcTypeParam.state === 'DW' ? 'active' : ''" @click="mcTypeParam.state = 'DW'">待挖</span>
              <span class="type" :class="mcTypeParam.state === 'DQ' ? 'active' : ''" @click="mcTypeParam.state = 'DQ'">已到期</span>
              <span class="type" :class="mcTypeParam.state === 'JJDQ' ? 'active' : ''" @click="mcTypeParam.state = 'JJDQ'">即将到期</span>
              <span class="type" :class="mcTypeParam.state === 'TZ' ? 'active' : ''" @click="mcTypeParam.state = 'TZ'">已退单</span>
            </p>
            <p>
              <span class="typeName">锁定期限:</span>
              <span class="type" :class="mcTypeParam.regularDateNum === 'ALL' ? 'active' : ''" @click="mcTypeParam.regularDateNum = 'ALL'">全部</span>
              <span class="type" :class="mcTypeParam.regularDateNum === '30' ? 'active' : ''" @click="mcTypeParam.regularDateNum = '30'">30天</span>
              <span class="type" :class="mcTypeParam.regularDateNum === '90' ? 'active' : ''" @click="mcTypeParam.regularDateNum = '90'">90天</span>
              <span class="type" :class="mcTypeParam.regularDateNum === '180' ? 'active' : ''" @click="mcTypeParam.regularDateNum = '180'">180天</span>
            </p>
          </div>
        <div v-if="tabbarIndex === 1" class="types">
          <p>
            <span class="typeName">矿机类型:</span>
            <span class="type" :class="mcTypeParam.isBhpPos === 'ALL' ? 'active' : ''" @click="mcTypeParam.isBhpPos = 'ALL'">全部</span>
            <span class="type" :class="mcTypeParam.isBhpPos === '0' ? 'active' : ''" @click="mcTypeParam.isBhpPos = '0'">单挖</span>
            <span class="type" :class="mcTypeParam.isBhpPos === '1' ? 'active' : ''" @click="mcTypeParam.isBhpPos = '1'">双挖</span>
          </p>
          <p>
            <span class="typeName">合约状态:</span>
            <span class="type" :class="mcTypeParam.state3 === 'ALL' ? 'active' : ''" @click="mcTypeParam.state3 = 'ALL'">全部</span>
            <span class="type" :class="mcTypeParam.state3 === 0 ? 'active' : ''" @click="mcTypeParam.state3 = 0">待承接</span>
            <span class="type" :class="mcTypeParam.state3 === 1 ? 'active' : ''" @click="mcTypeParam.state3 = 1">转让成功</span>
            <span class="type" :class="mcTypeParam.state3 === 2 ? 'active' : ''" @click="mcTypeParam.state3 = 2">已撤销</span>
          </p>
        </div>
      </div>
    </section>
    <section id="sec2">
      <div class="tableBox">
        <table class="table1" v-if="tabbarIndex === 0">
          <thead>
          <tr>
            <td>名称</td>
            <td>金额</td>
            <td>到手总算力</td>
            <td>合约期限</td>
            <td>合约状态</td>
            <td>开挖时间</td>
            <td>锁定期</td>
            <td>操作</td>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item , index) in list">
            <th><span>{{item.productName}}</span></th>
            <th>{{item.continue_total_deposit}} {{item.paymentCurrencyCode=="BCNY"?"OTC余额":item.paymentCurrencyCode}}</th>
            <th>{{item.totalPower}}T</th>
            <th>{{item.regularDateNum}}天</th>
            <th>{{item.workText}}</th>
            <th><span>{{item.startTime}}</span></th>
            <th><span>{{item.endTime}}</span></th>
            <th class="setting">
              <span class="pointer" v-if="item.dragStatus == 1 && item.flag.substring(1,2) != 1" @click="renewalOrder(item)">续单</span>
              <span class="pointer" @click="transferOrder(item)"
                    v-if="(item.type != 11 && item.type != 10 || item.paymentCurrencyCode != 'BHPC' || item.notReturn != 1) && item.label == 1 && item.num > 0">
                  转让
              </span>
              <span class="hoverhand" v-if="item.is_return_label == 1 && item.num > 0" @click="returnOrder(item)">退单</span>
            </th>
          </tr>
          </tbody>
        </table>
        <table class="table1" v-if="tabbarIndex === 1">
          <thead>
          <tr>
            <td>名称</td>
            <td>转让金额</td>
            <td>合约状态</td>
            <td>转让算力</td>
            <td>转让时间</td>
            <td>操作</td>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item , index) in list">
            <th><span>{{item.productName}}</span></th>
            <th>{{item.total_deposit}}{{item.paymentCurrencyCode}}</th>
            <th>{{item.transText}}</th>
            <th>{{item.total_power}}T</th>
            <th>{{item.operateTime.split(' ')[0]}}</th>
            <th class="setting">
              <span class="hoverhand" v-if="item.state==0" @click="revoke(item)">撤销</span>
            </th>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="pagination" v-if="list.length > 0 ">
        <!--分页-->
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          layout="prev, pager, next, jumper"
          :page-count="totalNum">
        </el-pagination>
      </div>
      <div class="noData" v-if="list.length === 0">
        <img src="../common/imgs/billNull.png" alt="空">
        <p>暂无数据</p>
      </div>
    </section>
    <confirm-dialog cfTitle="温馨提示" ref="revokeRef" @confirm="confirmRevoke"/>
  </div>
</template>
<script>
  import { myOrderList , myTransferList , removeTransfer} from '../http/api'
  export default {
    name : 'transferList',
    data(){
      return{
        tabbarIndex : 0 ,//头部index
        mcTypeParam : { //矿机类型大数组
          state2: "S", //ALL 全部 P购买 S 承接
          isBhpPos : 'ALL' , // ALL , PT , SW
          state : 'ALL' , // ALL 全部 KW开挖 DW 待挖   TZ 停租 DQ 已到期 JJDQ即将到期
          // type :	'ALL',  //ALL 全部 P购买 G赠送
          regularDateNum : 'ALL' , // ALL 全部 30活期 90定三 180定六
          // state2 : 'ALL' , //ALL 全部 P购买 S 承接
          // not_return : 'ALL' , //ALL 全部 1不回购 0 可回购
          // electricendType : 0 , // 电费时间类型查询 ；全部 0   1-过期； 2-即将到期（7天）； 3-没到期的
          state3 : 'ALL' ,// 2撤销 0待承接 1成功 全部 ALL
        },
        list : [],
        currentPage : 1,
        totalNum : 1,
        revokeItem : null,//撤销订单存放
      }
    },
    components:{
      //DatePicker :  require('element-ui').DatePicker, /*DatePicker*/
      ElPagination : require('element-ui').Pagination, /*ElPagination*/
      ConfirmDialog : resolve => { require(['../components/ConfirmDialog'], resolve) },/*确认弹窗*/
    },
    mounted() {
      this.loadMyGet();
    },
    computed:{
      listenParam(){
        let mcTypeParam = this.mcTypeParam;
        return {
          isBhpPos: mcTypeParam.isBhpPos,
          state: mcTypeParam.state,
          type: mcTypeParam.type,
          regularDateNum: mcTypeParam.regularDateNum,
          state3: mcTypeParam.state3,
        }
      }
    },
    watch:{
      tabbarIndex(){
        this.mcTypeParam = { //矿机类型大数组
            state2: "S", //ALL 全部 P购买 S 承接
            isBhpPos : 'ALL' , // ALL , PT , SW
            state : 'ALL' , // ALL 全部 KW开挖 DW 待挖   TZ 停租 DQ 已到期 JJDQ即将到期
            // type :	'ALL',  //ALL 全部 P购买 G赠送
            regularDateNum : 'ALL' , // ALL 全部 30活期 90定三 180定六
            // state2 : 'ALL' , //ALL 全部 P购买 S 承接
            // not_return : 'ALL' , //ALL 全部 1不回购 0 可回购
            // electricendType : 0 , // 电费时间类型查询 ；全部 0   1-过期； 2-即将到期（7天）； 3-没到期的
            state3 : 'ALL' ,// 2已撤销 0待承接 1成功 ALL全部
        };
      },
      listenParam(){
        if(this.tabbarIndex === 0){
          this.loadMyGet();
        } else {
          this.loadMyTransfer();
        }
      }
    },
    methods:{
      loadMyGet(){
        let param = JSON.parse(JSON.stringify(this.mcTypeParam));
        param.state2 = 'S';
        param.page = this.currentPage;
        param.pageSize = 10;
        let thiz = this;
        myOrderList(param).then(res => {
          if(res.code == 200){
            let list = res.data.orderList;
            thiz.totalNum = res.data.totalPage;
            thiz.for(list , (item , index) => {
              // item.from_username = item.fromUsername.length > 10 ? (item.fromUsername.slice(0, 6) + "…") : item.fromUsername;
              item.totalPower = thiz.accMul(item.num, item.basePower);
              item.totalBhpPower =thiz.accMul(item.num, item.bhpPower);
              item.name = item.productName.length > 10 ? (item.productName.slice(0, 10) + "…") : item.productName;
              if (item.rawPaymentCurrencyCode != "USDT") {
                item.continue_total_deposit = thiz.numSlice(item.totalDeposit, 2);
              } else {
                item.continue_total_deposit = thiz.numSlice(item.totalDeposit, 4);
              }
            });
            this.list = list;
          }
        });
      },
      loadMyTransfer(){
        let param = {
          isBhpPos: this.mcTypeParam.isBhpPos,
          page: this.currentPage,
          pageSize: "10",
          state : this.mcTypeParam.state3
        };
        // let state3 = this.mcTypeParam.state3;
        // param.state = state3;
        let thiz = this;
        myTransferList(param).then(res => {
          if(res.code == 200){
            let list = res.data.list;
            thiz.for(list , (item , index) => {
              item.total_power = thiz.numSlice(thiz.accMul(item.basePower, item.num), 2);
              item.total_bhppower = thiz.numSlice(thiz.accMul(item.bhpPower, item.num), 2);
              var total_deposit = thiz.accMul(item.productDeposit, item.num);
              if (item.paymentCurrencyCode == "USDT") {
                item.goods_deposit = thiz.numSlice(item.productDeposit, 4);
                item.total_deposit = thiz.numSlice(total_deposit, 4);
              } else {
                item.goods_deposit = thiz.numSlice(item.productDeposit, 2);
                item.total_deposit = thiz.numSlice(total_deposit, 2);
              }
              let state = item.state;
              if(state == 0 ){
                item.transText = '转让中';
              }else  if(state==1 || state==3 ){
                item.transText = '转让成功';
              }else if(state==2){
                item.transText = '已撤销';
              }
            });
            thiz.list = list;
          }
        });
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        if(this.tabbarIndex === 0){
          this.loadMyGet();
        }else{
          this.loadMyTransfer()
        }
      },
      renewalOrder(item){
        //去续单
        this.$router.push({ path : '/renewalOrder' , query :{orderId : item.orderId }});
      },
      transferOrder(item){
        //去转让
        this.$router.push({ path : '/transferOrder' , query :{orderId : item.orderId }});
      },
      returnOrder(item){
        //去退单
        this.$router.push({ path : '/returnOrder' , query :{orderId : item.orderId }});
      },
      revoke(item){
        var thisSatus = item.state;
        var thisUndo = item.isundo;
        if (thisSatus != 0)
          return;
        if (thisSatus == 0 && thisUndo != 1) {
          require('../common/js/toast').toast('转让十分钟内不可撤销');
          return
        }
        this.$refs.revokeRef.changeToast('是否确定撤销此订单');
        this.revokeItem = item;
      },
      confirmRevoke(){
        removeTransfer({ orderId: this.revokeItem.orderId}).then(res => {
          if(res.code == 200){
            require('../common/js/toast').toast('撤销成功');
            this.loadMyTransfer();
          }
        });
      },
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    padding: 0;
    >.d1{
      height: 68px;padding-left: 26px;border-bottom: 1px solid#E8E7E7;
      >button{
        float: left;height: 100%;position: relative;color: #999;font-size: 16px;background: none;margin-left: 68px;
        &:first-child{
          margin-left: 0;
        }
        &:hover{
          .colorYellow;
        }
        &.active{
          .colorYellow;
          &:after{
            content: '';display: inline-block;width: 100%;position: absolute;bottom: -1px;height: 2px;left: 0;.bgYellow;z-index: 1;
          }
        }
      }
    }
    >.mcStyles{
      padding-left: 26px;
      >.types{
        padding-bottom: 20px;padding-top: 5px;
        >p{
          overflow: hidden;padding-top: 20px;
          >span{
            float: left;color: #595959;font-size: 14px;margin-left: 30px;display: inline-block;
            &.typeName{
              margin-left: 0;width: 92px;
            }
            &.type:nth-child(2){
              margin-left: 15px;
            }
            &.type:hover , &.active{
              cursor: pointer;.colorYellow;
            }
          }
        }
      }
    }
  }
  #sec2{
    margin-top: 10px;min-height: 560px;
    >.tableBox{
      >table{
        width: 100%;text-align: left;
        thead>tr>td:first-child , tbody>tr>th:first-child{
          padding-left: 0px;min-width: 90px;
        }
        thead>tr>td:last-child , tbody>tr>th:last-child{
          padding-right: 0px;
        }
        th{
          font-weight: 500;font-size: 14px;color: #262626;
          >span{
            display: inline-block;height: 100%;
          }
        }
        >thead{
          color: #999999;font-size: 14px;
          tr>td{
            padding: 15px 0;
            &:last-child{
              text-align: right;
            }
          }
        }
        >tbody{
          th{
            border-bottom: 1px solid#eee;padding: 15px 6px;color: #595959;font-size: 14px;vertical-align: text-top;
          }
          tr>th:first-child{
            max-width: 220px;
          }
          >tr>th:last-child{
            text-align: right;
          }
          .pointer{
            .colorYellow;text-decoration: underline;
            &:hover{
              cursor: pointer;
            }
          }
          .setting{
            >span{
              display: inline-block;width: 100%;text-align: right;margin-top: 15px;.colorYellow;
              &:first-child{
                margin-top: 0px;
              }
            }
          }
        }
      }
    }
    .noData{
      text-align: center;font-size: 0;padding: 50px 0;
      >img{
        width: 100px;
      }
      >p{
        color: #999;font-size: 14px;
      }
    }
    .pagination{
      text-align: right;padding: 36px 0;
      /deep/ input{
        width: auto;
        &.el-input__inner{
          width: 100%;
        }
      }
    }
  }
</style>
